import { useState } from 'react'
import style from './index.module.css'
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import BiaoJi from './components/BiaoJi/index'
import ShuJu from './components/ShuJu/index'
import TuiGuang from './components/TuiGuang/index'
import XiaZai from './components/XiaZai/index'

function index() {
  const ImageData = [
    {
      img: '/src/assets/images/单独/zuoyou1.webp', zheZhao: (
        <div>
          <p className={style.liulan}>浏览</p>
        </div>
      ),
      dibu: (
        <div className={style.form}>
          <div className={style.qian}>
            <span style={{ background: "rgba(4, 255, 4, 0.142)", padding: "5px", color: "green" }} >表单</span>
            <h4 style={{ marginTop: "10px" }}>平安城市征文活动投票评选</h4>
            <p style={{ color: "#ccc" }}>2024-09-20</p>
          </div>
          <div className={style.hou}>
            <div className={style.xxxxxxxxxxx}>
              <div>
                <BiaoJi></BiaoJi>
              </div>
              <div>
                <ShuJu></ShuJu>
              </div>
              <div>
                <TuiGuang></TuiGuang>
              </div>
            </div>
          </div>
          <div>
            <p className={style.dibu}>
              <b>0</b>浏览量<b>0</b>访客<b>0</b>表单
            </p>
          </div>
        </div>
      )
    },
    {
      img: '/src/assets/images/单独/zuoyou2.webp', zheZhao: (
        <div>
          <p className={style.liulan}>浏览</p>
        </div>
      ),
      dibu: (
        <div className={style.form}>
          <div className={style.qian}>
            <span style={{ background: "rgba(4, 255, 4, 0.142)", padding: "5px", color: "green" }} >表单</span>
            <h4 style={{ marginTop: "10px" }}>心情日签早安拼图正能量问候宣传</h4>
            <p style={{ color: "#ccc" }}>2024-09-20</p>
          </div>
          <div className={style.hou}>
            <div className={style.xxxxxxxxxxx}>
              <div>
                <BiaoJi></BiaoJi>
              </div>
              <div>
                <XiaZai></XiaZai>
              </div>
            </div>
          </div>
          <div>
            <p className={style.dibu}>
              <span style={{ color: "#ccc" }}>(1125 * 2436 像素)</span>
            </p>
          </div>
        </div>
      )
    },
    {
      img: '/src/assets/images/单独/zuoyou3.webp', zheZhao: (
        <div>
          <p className={style.liulan}>浏览</p>
        </div>
      ),
      dibu: (
        <div className={style.form}>
          <div className={style.qian}>
            <span style={{ background: "rgba(4, 255, 4, 0.142)", padding: "5px", color: "green" }} >表单</span>
            <h4 style={{ marginTop: "10px" }}>平安城市征文活动投票评选</h4>
            <p style={{ color: "#ccc" }}>2024-09-20</p>
          </div>
          <div className={style.hou}>
            <div className={style.xxxxxxxxxxx}>
              <div>
                <BiaoJi></BiaoJi>
              </div>
              <div>
                <ShuJu></ShuJu>
              </div>
              <div>
                <TuiGuang></TuiGuang>
              </div>
            </div>
          </div>
          <div>
            <p className={style.dibu}>
              <b>0</b>浏览量<b>0</b>访客<b>0</b>表单
            </p>
          </div>
        </div>
      )
    },
    {
      img: '/src/assets/images/单独/zuoyou4.webp', zheZhao: (
        <div>
          <p className={style.liulan}>浏览</p>
        </div>
      ),
      dibu: (
        <div className={style.form}>
          <div className={style.qian}>
            <span style={{ background: "rgba(4, 255, 4, 0.142)", padding: "5px", color: "green" }} >表单</span>
            <h4 style={{ marginTop: "10px" }}>数字人口播企业宣传公司介绍</h4>
            <p style={{ color: "#ccc" }}>2024-09-20</p>
          </div>
          <div className={style.hou}>
            <div className={style.xxxxxxxxxxx}>
              <div>
                <BiaoJi></BiaoJi>
              </div>
              <div>
                <ShuJu></ShuJu>
              </div>
              <div>
                <TuiGuang></TuiGuang>
              </div>
            </div>
          </div>
          <div>
            <p className={style.dibu}>
              <b>0</b>浏览量<b>0</b>访客<b>0</b>表单
            </p>
          </div>
        </div>
      )
    },
    {
      img: '/src/assets/images/单独/zuoyou1.webp', zheZhao: (
        <div>
          <p className={style.liulan}>浏览</p>
        </div>
      ),
      dibu: (
        <div className={style.form}>
          <div className={style.qian}>
            <span style={{ background: "rgba(4, 255, 4, 0.142)", padding: "5px", color: "green" }} >表单</span>
            <h4 style={{ marginTop: "10px" }}>易企秀活动</h4>
            <p style={{ color: "#ccc" }}>2024-09-20</p>
          </div>
          <div className={style.hou}>
            <div className={style.xxxxxxxxxxx}>
              <div>
                <TuiGuang></TuiGuang>
              </div>
            </div>
          </div>
          <div>
            <p className={style.dibu}>
              <b>0</b>浏览量<b>0</b>访客<b>0</b>表单
            </p>
          </div>
        </div>
      )
    },
    {
      img: '/src/assets/images/单独/zuoyou2.webp', zheZhao: (
        <div>
          <p className={style.liulan}>浏览</p>
        </div>
      ),
      dibu: (
        <div className={style.form}>
          <div className={style.qian}>
            <span style={{ background: "rgba(4, 255, 4, 0.142)", padding: "5px", color: "green" }} >表单</span>
            <h4 style={{ marginTop: "10px" }}>asdasddsad大声道阿萨德</h4>
            <p style={{ color: "#ccc" }}>2024-09-20</p>
          </div>
          <div className={style.hou}>
            <div className={style.xxxxxxxxxxx}>
              <div>
                <ShuJu></ShuJu>
              </div>
            </div>
          </div>
          <div>
            <p className={style.dibu}>
              <b>0</b>浏览量<b>0</b>访客<b>0</b>表单
            </p>
          </div>
        </div>
      )
    },
    {
      img: '/src/assets/images/单独/zuoyou3.webp', zheZhao: (
        <div>
          <p className={style.liulan}>浏览</p>
        </div>
      ),
      dibu: (
        <div className={style.form}>
          <div className={style.qian}>
            <span style={{ background: "rgba(4, 255, 4, 0.142)", padding: "5px", color: "green" }} >表单</span>
            <h4 style={{ marginTop: "10px" }}>尽快更换森岛帆高京东客服更好</h4>
            <p style={{ color: "#ccc" }}>2024-09-20</p>
          </div>
          <div className={style.hou}>
            <div className={style.xxxxxxxxxxx}>
              <div>
                <BiaoJi></BiaoJi>
              </div>
              <div>
                <ShuJu></ShuJu>
              </div>
              <div>
                <TuiGuang></TuiGuang>
              </div>
            </div>
          </div>
          <div>
            <p className={style.dibu}>
              <b>0</b>浏览量<b>0</b>访客<b>0</b>表单
            </p>
          </div>
        </div>
      )
    },
    {
      img: '/src/assets/images/单独/zuoyou4.webp', zheZhao: (
        <div>
          <p className={style.liulan}>浏览</p>
        </div>
      ),
      dibu: (
        <div className={style.form}>
          <div className={style.qian}>
            <span style={{ background: "rgba(4, 255, 4, 0.142)", padding: "5px", color: "green" }} >表单</span>
            <h4 style={{ marginTop: "10px" }}>澳甲到付不能发大健康深V看数据库发你</h4>
            <p style={{ color: "#ccc" }}>2024-09-20</p>
          </div>
          <div className={style.hou}>
            <div className={style.xxxxxxxxxxx}>
              <div>
                <BiaoJi></BiaoJi>
              </div>
              <div>
                <ShuJu></ShuJu>
              </div>
              <div>
                <TuiGuang></TuiGuang>
              </div>
            </div>
          </div>
          <div>
            <p className={style.dibu}>
              <b>0</b>浏览量<b>0</b>访客<b>0</b>表单
            </p>
          </div>
        </div>
      )
    },
  ]

  const [currentIndex, setCurrentIndex] = useState(0);

  const ZUO = () => {
    if (currentIndex > 0) {
      setCurrentIndex(currentIndex - 1);
    }
  };

  const YOU = () => {
    if (currentIndex < ImageData.length - 1) {
      setCurrentIndex(currentIndex + 1);
    }
  };
  const listData = [
    {
      id: '1', label: '全部', content: (
        <div className={style.imgData}>
          <span className={style.zuo} onClick={ZUO}><LeftOutlined /></span>
          <span className={style.you} onClick={YOU}><RightOutlined /></span>
          <ul style={{ transform: `translateX(-${currentIndex * 50}%)`, transition: 'transform 0.8s ease' }}>
            {
              ImageData.map((item, index) => {
                return <li key={index}>
                  <div className={style.lis}>
                    <img src={item.img} alt="" className={style.imgs} />
                    {item.dibu}
                    <div className={style.overlay}>{item.zheZhao}</div>
                  </div>
                </li>
              })
            }
          </ul>
        </div>
      )
    },
    {
      id: '2', label: 'H5', content: (
        <div>
          <img src="/src/assets/images/单独/zuoyou1.webp" alt="" />
        </div>
      )
    },
    {
      id: '3', label: '海报', content: (
        <div>
          <img src="/src/assets/images/单独/zuoyou2.webp" alt="" />
        </div>
      )
    },
    {
      id: '4', label: '长页', content: (
        <div>
          <img src="/src/assets/images/单独/zuoyou3.webp" alt="" />
        </div>
      )
    },
    {
      id: '5', label: '表单', content: (
        <div>
          <img src="/src/assets/images/单独/zuoyou4.webp" alt="" />
        </div>
      )
    },
    {
      id: '6', label: '互动', content: (
        <div></div>
      )
    },
    {
      id: '7', label: '电子动画', content: (
        <div></div>
      )
    },
    {
      id: '8', label: '视频', content: (
        <div></div>
      )
    },
  ]
  const [activeTab, setActiveTab] = useState(listData[0].id); // 默认激活第一个标签

  const handleTabClick = (tabId: any) => {
    setActiveTab(tabId);
  };

  return (
    <div className={style.box}>

      <h1 style={{ marginBottom: "15px" }}>作品</h1>
      <div className={style.tabs}>
        {listData.map(tab => (
          <button
            key={tab.id}
            onClick={() => handleTabClick(tab.id)}
            className={`${activeTab === tab.id ? style.active : ''}`}
          >
            {tab.label}
          </button>
        ))}
      </div>

      <div className={style.tab_content}>
        {listData.map(tab =>
          activeTab === tab.id ? <div key={tab.id}>{tab.content}</div> : null
        )}
      </div>
    </div>
  )
}

export default index
